<!--
  独立页面，用来测试iframe嵌套此项目，如何进行信息展示，
  浏览器本地访问此页面即可
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三维地图</title>
  <style>
    html,
    body,
    .layout {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    iframe {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="layout">
      <iframe id="myframe" frameborder="0" width="100%" height="100%"></iframe>
  </div>

  <script>

    const earthUrl = 'http://192.168.50.131:30012/#/nest?func=3dDisplay'

    window.onload = function () {
      const _iframe = document.querySelector("#myframe")
      _iframe.setAttribute('src', earthUrl)
      _iframe.onload = handeLoad  
    }

    window.addEventListener('message', handleDataReceive)

    function start() {
      const _iframe = document.querySelector("#myframe")
      _iframe.setAttribute('src', earthUrl)
      _iframe.onload = handeLoad  
    }

    // 加载瓦片地址【必要】
    function handeLoad(e) {
      const target = e.target
      setTimeout(() => {
        const jsonStr = JSON.stringify({
          type: 'Tileset',
          data: {
            url: 'http://182.151.56.8:3333/SiChuan/GuangYuan/E-GY010/tileset.json',
          }
        })
        target.contentWindow.postMessage(jsonStr, '*')
      }, 1000);
    }

    function handleDataReceive(d) {
      console.info(d.data)
      document.querySelector('#dataShowArea').innerHTML += ('<br/>' + d.data)
    }

    // 数据显示 之 数据初始化  （第一步）
    function dataInit(info) {
      const jsonStr = JSON.stringify(info)
      document.querySelector('#myframe').contentWindow.postMessage(jsonStr, '*')
    }

    // 数据显示 之 数据显示  （在第一步之后执行）
    function sendInfo(info) {
      const jsonStr = JSON.stringify(info)
      document.querySelector('#myframe').contentWindow.postMessage(jsonStr, '*')
    }

    // 数据显示 之 数据隐藏  （在数据显示之后调用）
    function sendInfoHide(info) {
      const jsonStr = JSON.stringify(info)
      document.querySelector('#myframe').contentWindow.postMessage(jsonStr, '*')
    }

    // 数据显示 之 数据移除  （在第一步之后执行即可）
    function dataRemove() {
      const jsonStr = JSON.stringify(info)
      document.querySelector('#myframe').contentWindow.postMessage(jsonStr, '*')
    }

    // 数据显示 之 数据定位  （在第一步之后执行即可）
    function dataShowAndFly(info) {
      const jsonStr = JSON.stringify(info)
      document.querySelector('#myframe').contentWindow.postMessage(jsonStr, '*')
    }


  </script>
</body>

</html>